<template>
<div>
	<h3 class="base-title">基础用法</h3>
	<p class="base-content">基础的表格展示用法。</p>

	<div class="demo-block" :class="{'show-case-core':caseObj1.showCoreFlag}">
		<div class="demo-block-source">
			<bh-table :data="tableData">
				<bh-table-column
					prop="date"
					label="日期"
					width="180">
				</bh-table-column>
				<bh-table-column
					prop="name"
					label="姓名"
					width="180">
				</bh-table-column>
				<bh-table-column
					prop="address"
					label="地址">
				</bh-table-column>
			</bh-table>
		</div>
		<div class="demo-block-core">
			<textarea class="demo-core-box" readonly="readonly" v-model="caseSourceVal" style='height: 620px;'></textarea>
		</div>
		<div class="demo-block-footer">
			<div class="demo-ms-arr" @click='toggleDemoCore(caseObj1)'>
				<span class="demo-ms-s">显示代码</span>
				<span class="demo-ms-h">隐藏代码</span>
			</div>
			<a :href="caseObj1.coreUrl" target="_blank" class="demo-online" title="前往 codepen.io 运行此示例">在线运行</a>
		</div>
	</div>
</div>
</template>

<script>
const caseSourceVal = `
<template>
<bh-table :data="tableData">
	<bh-table-column
		prop="date"
		label="日期"
		width="180">
	</bh-table-column>
	<bh-table-column
		prop="name"
		label="姓名"
		width="180">
	</bh-table-column>
	<bh-table-column
		prop="address"
		label="地址">
	</bh-table-column>
</bh-table>
</template>
export default {
	data () {
		return {
			tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
			}],
		};
	},
}
`;
export default {
	data () {
		return {
			caseObj1: {
				showCoreFlag: false,
				coreUrl: 'https://codepen.io/xiebaolin/pen/LYjVWox',
			},
			caseSourceVal: caseSourceVal,

			tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
			}],
		};
	},
	methods: {
		// 切换代码显隐
		toggleDemoCore (item) {
			item.showCoreFlag = !item.showCoreFlag;
		},
	},
}
</script>

<style scoped>
</style>
